<template>
  <view class="hb-w-full hb-h-full hb-relative hb-flex hb-flex-col">
    <view class="hb-bg-white hb-w-full hb-flex-shrink-0">
      <view class="hb-flex hb-items-center hb-justify-between hb-mb-4">
        <view class="hb-flex hb-items-center">
          <TmIcon name="ali-icon icon-shenfenmingpian" color="primary" :font-size="40" />
          <TmText class="hb-ml-2" _class="hb-font-bold" label="名片信息" :font-size="28" />
        </view>
        <TmButton
          :margin="[0, 0]"
          icon="ali-icon icon-edit"
          :width="124"
          :round="12"
          :height="48"
          :font-size="24"
          label="编辑"
          color="primary"
          @click="handleCardEdit"
        />
      </view>

      <!-- 人员信息 -->
      <view
        class="hb-p-3 hb-mb-4 hb-border hb-border-solid hb-border-[#EBEDF0] hb-rounded-lg hb-flex hb-items-center"
      >
        <TmImage
          class="hb-flex-shrink-0"
          :src="botCardInfo?.iconFileUrl"
          :width="80"
          :height="80"
          :round="25"
        />
        <view class="hb-ml-3 hb-flex-1 hb-flex hb-flex-col">
          <TmText
            class="hb-mb-2"
            _class="hb-font-bold text-overflow-1"
            :label="botCardInfo?.name"
            :font-size="32"
          />
          <AuthenticationTag :certification-type="botCardInfo?.certificationType" />
        </view>
      </view>

      <!-- 简介 -->
      <TmText label="简介：" _class="hb-font-bold hb-mb-3" :font-size="32" />
      <TmText
        :label="botCardInfo?.description"
        _class="text-overflow-3 hb-mb-3"
        color="#646566"
        :font-size="28"
      />

      <!-- 单位信息 -->
      <TmText label="单位信息：" _class="hb-font-bold" :font-size="32" />
    </view>
    <scroll-view
      enable-passive
      enhanced
      :show-scrollbar="false"
      scroll-y
      class="hb-w-full hb-flex-1 hb-h-0"
    >
      <template v-for="item in botCardInfo?.botCompanyInfoVoList" :key="item.id">
        <view
          class="hb-flex hb-items-center hb-py-3 hb-box-content hb-h-12 hb-border-b hb-border-solid hb-border-[#EBEDF0]"
        >
          <TmImage class="hb-flex-shrink-0" :src="item.logo" :width="86" :height="86" :round="4" />
          <view
            class="hb-ml-2 hb-flex-1 hb-h-full hb-overflow-hidden hb-flex hb-flex-col hb-justify-around"
          >
            <TmText _class="text-overflow-1 hb-font-bold" :label="item.name" :font-size="28" />
            <scroll-view
              v-if="item.mainBusinessList?.length"
              class="hb-w-full"
              scroll-x
              enable-passive
              enhanced
              :show-scrollbar="false"
              enable-flex
            >
              <view class="hb-flex hb-gap-2">
                <template v-for="(tag, index) in item.mainBusinessList" :key="index">
                  <RoleTag type="member" :text="tag" />
                </template>
              </view>
            </scroll-view>
          </view>
        </view>
      </template>
      <Empty v-if="botCompanyInfoList.length === 0" text="暂无单位信息" />
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
  import { getByIdInfo } from '@/api/card';
  import { BotCardInfo, BotCompanyInfo } from '@/api/card/type';

  defineOptions({
    name: 'BusinessCardResource',
  });

  const botCardInfo = ref<BotCardInfo>();
  const botCompanyInfoList = ref<BotCompanyInfo[]>([]);

  const getBotCardInfo = async () => {
    const res = await getByIdInfo();
    botCardInfo.value = res;
    botCompanyInfoList.value = res.botCompanyInfoVoList || [];
  };

  onMounted(() => {
    getBotCardInfo();
  });

  const handleCardEdit = () => {
    navigateTo({
      name: 'cardEdit',
      options: {
        success: () => {
          getBotCardInfo();
        },
      },
    });
  };
</script>

<style lang="scss" scoped></style>
